<template>
  <div class="analytics-page">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">数据分析</h1>
        <p class="page-subtitle">深入了解您的业务数据和趋势</p>
      </div>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="large"
        />
        <el-button type="primary">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 关键指标 -->
    <div class="metrics-grid">
      <div class="metric-card" v-for="metric in metrics" :key="metric.title">
        <div class="metric-header">
          <div class="metric-icon" :style="{ background: metric.gradient }">
            <el-icon><component :is="metric.icon" /></el-icon>
          </div>
          <div class="metric-trend" :class="metric.trend">
            <el-icon>
              <component :is="metric.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
            </el-icon>
            {{ metric.change }}%
          </div>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ metric.value }}</div>
          <div class="metric-title">{{ metric.title }}</div>
          <div class="metric-description">{{ metric.description }}</div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <!-- 主要图表 -->
      <div class="main-chart">
        <div class="chart-header">
          <h3>用户增长趋势</h3>
          <div class="chart-controls">
            <el-radio-group v-model="chartType" size="small">
              <el-radio-button label="line">折线图</el-radio-button>
              <el-radio-button label="bar">柱状图</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chart-container">
          <div class="chart-placeholder">
            <div class="chart-line" v-if="chartType === 'line'">
              <svg width="100%" height="200" viewBox="0 0 800 200">
                <path
                  d="M 0 150 L 114 120 L 228 80 L 342 60 L 456 40 L 570 20 L 684 10 L 800 5"
                  stroke="url(#gradient)"
                  stroke-width="3"
                  fill="none"
                />
                <defs>
                  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <div class="chart-bars" v-else>
              <div 
                v-for="(bar, index) in chartData" 
                :key="index"
                class="chart-bar"
                :style="{ height: bar + '%', background: getBarColor(bar) }"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 侧边图表 -->
      <div class="side-charts">
        <div class="side-chart">
          <h4>用户活跃度</h4>
          <div class="activity-chart">
            <div class="activity-bar" v-for="(activity, index) in activityData" :key="index">
              <div class="activity-label">{{ activity.label }}</div>
              <div class="activity-progress">
                <div class="activity-fill" :style="{ width: activity.value + '%', background: activity.color }"></div>
              </div>
              <div class="activity-value">{{ activity.value }}%</div>
            </div>
          </div>
        </div>

        <div class="side-chart">
          <h4>地域分布</h4>
          <div class="region-list">
            <div class="region-item" v-for="region in regionData" :key="region.name">
              <div class="region-info">
                <span class="region-name">{{ region.name }}</span>
                <span class="region-value">{{ region.value }}%</span>
              </div>
              <div class="region-bar">
                <div class="region-fill" :style="{ width: region.value + '%', background: region.color }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-table-section">
      <div class="table-header">
        <h3>详细数据</h3>
        <el-button type="text">查看更多</el-button>
      </div>
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" class="analytics-table">
          <el-table-column prop="date" label="日期" />
          <el-table-column prop="users" label="用户数" />
          <el-table-column prop="sessions" label="会话数" />
          <el-table-column prop="bounceRate" label="跳出率" />
          <el-table-column prop="avgSession" label="平均会话时长" />
          <el-table-column prop="conversion" label="转化率" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 日期范围
const dateRange = ref([])

// 图表类型
const chartType = ref('line')

// 关键指标
const metrics = ref([
  {
    title: '总用户数',
    value: '45,678',
    change: '+12.5',
    trend: 'up',
    icon: 'User',
    gradient: 'var(--gradient-primary)',
    description: '较上月增长12.5%'
  },
  {
    title: '活跃用户',
    value: '23,456',
    change: '+8.2',
    trend: 'up',
    icon: 'View',
    gradient: 'var(--gradient-secondary)',
    description: '日活跃用户数'
  },
  {
    title: '转化率',
    value: '3.2%',
    change: '+1.8',
    trend: 'up',
    icon: 'TrendCharts',
    gradient: 'var(--gradient-accent)',
    description: '较上月提升1.8%'
  },
  {
    title: '平均会话时长',
    value: '4分32秒',
    change: '-0.5',
    trend: 'down',
    icon: 'Clock',
    gradient: 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
    description: '较上月减少0.5分钟'
  }
])

// 图表数据
const chartData = ref([65, 78, 90, 85, 92, 88, 95, 87, 93, 89, 91, 96])

// 活跃度数据
const activityData = ref([
  { label: '非常活跃', value: 35, color: '#10b981' },
  { label: '活跃', value: 28, color: '#6366f1' },
  { label: '一般', value: 22, color: '#f59e0b' },
  { label: '不活跃', value: 15, color: '#ef4444' }
])

// 地域分布数据
const regionData = ref([
  { name: '北京', value: 25, color: '#6366f1' },
  { name: '上海', value: 20, color: '#10b981' },
  { name: '广州', value: 15, color: '#f59e0b' },
  { name: '深圳', value: 12, color: '#ef4444' },
  { name: '其他', value: 28, color: '#8b5cf6' }
])

// 表格数据
const tableData = ref([
  {
    date: '2024-01-15',
    users: '2,345',
    sessions: '3,456',
    bounceRate: '45.2%',
    avgSession: '3分45秒',
    conversion: '2.8%'
  },
  {
    date: '2024-01-14',
    users: '2,234',
    sessions: '3,234',
    bounceRate: '46.1%',
    avgSession: '3分32秒',
    conversion: '2.6%'
  },
  {
    date: '2024-01-13',
    users: '2,123',
    sessions: '3,123',
    bounceRate: '44.8%',
    avgSession: '3分58秒',
    conversion: '2.9%'
  }
])

// 获取柱状图颜色
const getBarColor = (value) => {
  if (value >= 90) return '#10b981'
  if (value >= 80) return '#6366f1'
  if (value >= 70) return '#f59e0b'
  return '#ef4444'
}
</script>

<style lang="scss" scoped>
.analytics-page {
  animation: fadeIn 0.6s ease-out;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

.header-content {
  .page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  
  .page-subtitle {
    color: var(--text-secondary);
    font-size: 16px;
  }
}

.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-lg);
  
  &:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--border-light);
  }
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  
  &.up {
    color: var(--success-color);
  }
  
  &.down {
    color: var(--danger-color);
  }
}

.metric-content {
  .metric-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
  }
  
  .metric-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
  }
  
  .metric-description {
    color: var(--text-secondary);
    font-size: 14px;
  }
}

.charts-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.main-chart {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  
  h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
  }
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-line {
  width: 100%;
  height: 100%;
}

.chart-bars {
  display: flex;
  align-items: end;
  justify-content: space-between;
  height: 200px;
  gap: 8px;
}

.chart-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  transition: all 0.3s ease;
  min-height: 20px;
  
  &:hover {
    transform: scaleY(1.1);
  }
}

.side-charts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.side-chart {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
  
  h4 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
  }
}

.activity-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activity-label {
  width: 80px;
  color: var(--text-secondary);
  font-size: 14px;
}

.activity-progress {
  flex: 1;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.activity-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.activity-value {
  width: 40px;
  text-align: right;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.region-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.region-item {
  .region-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .region-name {
      color: var(--text-secondary);
      font-size: 14px;
    }
    
    .region-value {
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 500;
    }
  }
  
  .region-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
  }
  
  .region-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
  }
}

.data-table-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  h3 {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
  }
}

.analytics-table {
  :deep(.el-table__header) {
    background: var(--bg-secondary);
  }
  
  :deep(.el-table__row) {
    background: var(--bg-card);
    
    &:hover {
      background: var(--bg-tertiary);
    }
  }
  
  :deep(.el-table__cell) {
    border-bottom: 1px solid var(--border-color);
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    gap: 20px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    flex-direction: column;
    width: 100%;
  }
}
</style> 